<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> 延时提示框</title>
	<style>
		div {
			float: left;
			margin-left: 20px;
		}

		#div1 {
			width: 200px;
			height: 200px;
			background: red;
		}

		#div2 {
			width: 300px;
			height: 300px;
			background: #CCCCCC;
			display: none;
		}
	</style>
	<script>

		window.onload = function () {
			var oDiv1 = document.getElementById("div1");
			var oDiv2 = document.getElementById("div2");
			var timer = null;
			oDiv1.onmouseover = function () {
				oDiv2.style.display = "block";
			};
			oDiv1.onmouseout = function () {
				timer=setTimeout(function () {
					oDiv2.style.display = "none";

				}, 500);


			};
			oDiv2.onmouseover = function () {
				clearTimeout(timer);

			}
			oDiv2.onmouseout=function () {
				oDiv2.style.display = "none";

			}
		}


	</script>

</head>

<body>
<div id="div1"></div>
<div id="div2"></div>

</body>
</html>